<template>
  <v-navigation-drawer
    clipped
    app
  >

    <v-toolbar flat>
    <v-list>
      <v-list-item>
        <v-list-item-avatar>
          <img src="../assets/nutcracker.jpg" />
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title>抚远</v-list-item-title>
          <v-list-item-subtitle>管理员</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-toolbar>

    <v-divider></v-divider>

    <v-list
    dense
    nav
    >
    <v-list-group
        v-for="item in menuList"
        :key="item.id"
        v-model="item.active"
        :prepend-icon="item.action"
    >
    <template v-slot:activator>
        <v-list-item-content>
            <v-list-item-title v-text="item.title"></v-list-item-title>
        </v-list-item-content>
    </template>

    <v-list-item
    v-for="subItem in item.items"
    :key="subItem.id"
    :to="subItem.path"
    >
        <v-list-item-action>
            <v-icon>{{ subItem.action }}</v-icon>
        </v-list-item-action>
        <v-list-item-content>
            <v-list-item-title v-text="subItem.title"></v-list-item-title>
        </v-list-item-content>
    </v-list-item>
    </v-list-group>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  data () {
    return {
      menuList: [
        {
          id: 1,
          title: '业务管理',
          path: '/echarts',
          pid: 0,
          action: 'mdi-home-city',
          items: [
            {
              id: 2,
              title: '业务1',
              path: '/echarts/ePage1',
              pid: 1,
              action: 'mdi-view-dashboard'
            },
            {
              id: 3,
              title: '业务2',
              path: '/echarts/ePage2',
              pid: 1,
              action: 'mdi-image'
            },
            {
              id: 4,
              title: '业务3',
              path: '/echarts/ePage3',
              pid: 1,
              action: 'mdi-help-box'
            }
          ]
        },
        {
          id: 6,
          title: '基础信息',
          path: '/user',
          pid: 0,
          action: 'mdi-star',
          items: [
            {
              id: 7,
              title: '用户管理',
              path: '/user/userList',
              pid: 6,
              action: 'mdi-account'
            },
            {
              id: 8,
              title: '菜单管理',
              path: '/menu/menuList',
              pid: 6,
              action: 'mdi-view-dashboard'
            }
          ]
        }
      ]
    }
  }
}
</script>
